<template>
    <view class="container">
        <u-sticky :offset-top="data.offsetTop" :enable="data.enable" h5-nav-height="66">
            <gap-tabs v-model="data.current" :tabs="list" @change="tabsChange" :gap="gap" :height="100"></gap-tabs>
        </u-sticky>
        <!-- <mescroll-empty :option="data.emptyOption" v-show="datalist.length == 0" /> -->
        <!-- 单列 -->
        <column1 v-if="mode === 0" :list="datalist" :config="config"></column1>
        <!-- 双列 -->
        <column2 v-if="mode === 1" :list="datalist" :config="config"></column2>
        <!-- 三列 -->
        <column3 v-if="mode === 2" :list="datalist" :config="config"></column3>

        <u-loadmore margin-top="20" :status="currentPage && currentPage.isEnd ? 'nomore' : 'loadmore'" v-if="datalist.length > 6"></u-loadmore>
    </view>
</template>

<script lang="ts" setup>
/** 单列*/
import column1 from './components/Column-1/index.vue';
/** 双列*/
import column2 from './components/Column-2/index.vue';
/** 三列*/
import column3 from './components/Column-3/index.vue';

import { computed, inject, onMounted, reactive, nextTick } from 'vue'

import { useUserStore } from '@/store'

const d = inject<any>('data')


const emit = defineEmits(['scrollTo'])

const mode = computed(() => {
    return d.style.listStyle || 0
})
const $u = computed(() => {
    return uni.$u
})
const list = computed(() => {
    return d.groupList.map((m: any) => {
        return {
            ids: m.urlGroup && m.urlGroup.ids,
            type: m.urlGroup && m.urlGroup.type,
            name: m.content,
            unid: $u.value.guid(6)
        }
    })
})

const gap = computed(() => {
    return d.style.labelWidth
})

interface dataProps {
    enable: boolean
    current: number
    offsetTop: number
    page: Array<any>
    emptyOption: any
}

const data = reactive<dataProps>({
    enable: true,
    current: 0,
    offsetTop: 0,
    page: [],
    emptyOption: {
        icon: '/static/icon/000000.png'
    }
})

const currentPage = computed({
    get(){
        return data.page[data.current] || {}
    },
    set(value){
        // data.page[data.current] = value
        console.log('----');
        console.log(value);
    }
})

const datalist = computed(() => {
    return data.page[data.current]?.data || []
})

const config = computed(() => {
    let temp = d.style

    let res = {
        padding: `${temp.marginTopAndBottom}px ${temp.marginLeftAndRight}px`,
        labelStyle: {
            lineHeight: temp.activeFontSize + 10 + 'px',
            color: temp.activeFontColor,
            fontSize: temp.activeFontSize + 'px'
        },
        priceStyle: {
            color: temp.textColor || 'red',
            fontSize: temp.priceFontSize + 'px',
            lineHeight: temp.priceFontSize + 10 + 'px'
        },
        titleStyle: {
            color: temp.goodsTitleColor || 'black',
            fontSize: temp.goodsTitleFontSize + 'px',
            lineHeight: temp.goodsTitleFontSize + 10 + 'px',
            maxHeight: (temp.goodsTitleFontSize + 10) * 3 + 'px'
        },
        backgroundColor: d.backgroundColor,
        marginRight: d.marginRight,
        marginBottom: (temp.marginBottom || 0) + 'px',
        borderRadius: d.borderRadius,
        showStar: d.showStar,
        showLabel: d.showActive,
        showSuggest: d.showSuggest,
        showPrice: d.showPrice,
        showSales: d.showSale,
        starColor: temp.starColor || '#f0ce68',
        useWaterfall: temp.useWaterfall
    }
    return res
})

onMounted(() => {
    const sys: any = uni.getSystemInfoSync()
    // #ifdef APP-PLUS
    // 状态栏高度 + 自定义导航高度 单位px
    let px = sys.statusBarHeight + 66
    data.offsetTop = $u.value.$tools.px2rpx(px)
    // #endif
    data.page = d.groupList.map((m: any) => {
        return {
            num: 1,
            isEnd: false,
            sort: m.goodsOrder,
            data: []
        }
    })
    getData()
})

function tabsChange(e: number) {
    data.current = e
    nextTick(() => {
        emit('scrollTo')
    })
    // 如果没有数据 就需要重新请求数据
    if (data.page[e].data.length == 0) getData()
}

function getData() {
    uni.$u.throttle(() => {
        let userInfo = useUserStore().userInfo

        if (!userInfo) return // 未登录
        if (currentPage.value.isEnd && currentPage.value.data.length != 0) return // 分页最后一页

        let param: any = {
            current: currentPage.value.num || 1,
            merchantType: userInfo.type,
            memberId: userInfo.memberId
        }
        if (list.value[data.current].type == 2) param.groupIds = list.value[data.current].ids
        if (list.value[data.current].type == 3) param.labelIds = list.value[data.current].ids
        if (list.value[data.current].type == 4) param.releaseIds = list.value[data.current].ids

        switch (currentPage.value.sort) {
            case 0:
                param.saleSort = 'desc'
                break
            case 1:
                param.saleSort = 'asc'
                break
            case 2:
                param.timeSort = 'desc'
                break
            case 3:
                param.timeSort = 'asc'
                break
            case 4:
                param.priceSort = 'desc'
                break
            case 5:
                param.priceSort = 'asc'
                break
        }

        uni.$u.$api.GoodsApi.queryGoodsReleasePage(param).then((res: any) => {
            res.records.forEach((m: any) => {
                m.unid = $u.value.guid(6)
            })
            if (res.pages <= res.current) {
                currentPage.value.isEnd = true
            } else {
                currentPage.value.num++
            }
            //如果是第一页需手动制空列表
            if (currentPage.value.num == 1) currentPage.value.data = []
            let list = currentPage.value.data.concat(res.records)
            currentPage.value.data = list
        })
    }, 500)
}
</script>

<style scoped lang="scss">
.container {
    margin-top: 20rpx;
}
</style>
